<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>div-transition</title>
  <script src="./js/vue.min.js"></script>
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
</head>
<style>
  .left-enter,
  .right-leave-to {
    transform: translateX(100%);
  }

  .left-enter-to,
  .left-leave,
  .right-enter-to {
    transform: translateX(0);
  }

  .left-leave-to,
  .right-enter {
    transform: translateX(-100%);
  }

  .left-enter-active,
  .left-leave-active,
  .right-enter-active,
  .right-leave-active {
    transition: all 1s ease;
  }

  ul,
  li {
    list-style: none;
  }

  .member-center {
    width: 100%;
    min-width: 1000px;
    height: auto;
    text-align: left;
    background-color: #f6f6f6;
  }

  .menber-content {
    width: 1000px;
    margin: 0 auto 20px;
    position: relative;
    min-height: 500px;
  }

  .title {
    margin: 20px 0 15px;
    font-weight: bolder;
    color: black;
  }

  .menu {
    width: 100%;
    height: 40px;
    margin-top: 15px;
  }

  .menu ul {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
  }

  .menu ul li {
    height: 100%;
    line-height: 40px;
    text-align: center;
    color: #176498;
    opacity: 0.7;
    padding-right: 10px;
    cursor: pointer;
  }

  .product-wrap {
    margin: 5px 0 15px;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
  }

  .hide {
    /*重要*/
    position: absolute;
    top: 0px;
    left: 0px;
  }

  .product-wrap ul {
    clear: both;
    width: 100%;
    display: inline-block;
  }

  .product-wrap ul li {
    width: 25%;
    float: left;
    text-align: center;
    margin-bottom: 22px;
    box-sizing: border-box;
    padding-right: 22px;
    cursor: pointer;
  }

  .product-wrap ul li:nth-child(4n + 4) {
    padding-right: 0px;
  }

  .product-wrap ul li a {
    border: 1px solid #ccc;
    display: block;
  }

  .product-wrap ul li a p {
    position: relative;
    min-height: 66px;
    line-height: 66px;
    box-shadow: 2px 2px 10px #909090;
    margin: 0;
  }

  .product-wrap .product li:nth-child(8n - 6) a p,
  .product-wrap .product li:nth-child(8n - 3) a p,
  .product-wrap .product li:nth-child(8n - 1) a p,
  .product-wrap .product li:nth-child(8n - 4) a p {
    background: #0086d4;
  }

  .product-wrap .product li a {
    border: 1px solid #b3c8e6;
  }

  .product-wrap .product li a p {
    background: #0066a1;
    color: #fff;
    box-shadow: none;
  }

  .product3Box {
    display: inline-block;
    width: 100%;
  }

  .clear {
    clear: both;
  }
</style>

<body>
  <div class="member-center" id='transition-box'>
    <div class="menber-content">
      <div class="title" v-show="!sort1">产品分类</div>
      <div class="menu" v-show="sort1">
        <ul>
          <li @click="goProduct1">{{sort1}}</li>
          <li v-show="sort2" @click="goProduct2('button')">> {{sort2}}</li>
          <li v-show="sort3" @click="goProduct3('button')">> {{sort3}}</li>
          <li v-show="isProduct4">> {{sort4}}</li>
        </ul>
      </div>
      <div class="product-wrap">
        <transition :name="move">
          <ul class v-show="isProduct1" :class="{hide:!isProduct1}">
            <li v-for="(item,index) in productList1" :key="index" @click="goProduct2(item)">
              <a>
                <p>{{item.Title}}</p>
              </a>
            </li>
          </ul>
        </transition>
        <transition :name="move">
          <ul class="product" v-show="isProduct2" :class="{hide:!isProduct2}" key="product2">
            <li v-for="(item,index) in productList2" :key="index" @click="goProduct3(item)">
              <a>
                <p>{{item.Title}}</p>
              </a>
            </li>
          </ul>
        </transition>
        <transition :name="move">
          <ul class="product" v-show="isProduct3" :class="{hide:!isProduct3}" key="product3">
            <li v-for="(item,index) in productList3" :key="index" @click="goProduct4(item)">
              <a>
                <p>{{item.Title}}</p>
              </a>
            </li>
          </ul>
        </transition>
        <transition :name="move">
          <div class="product3Box" v-show="isProduct4" :class="{hide:!isProduct4}" key="product4">
            <ul class="product" v-if="productList4.length">
              <li v-for="(item,index) in productList4" :key="index">
                <a>
                  <p>{{item.Title}}</p>
                </a>
              </li>
            </ul>
            <div v-else class="noData4">无相关数据</div>
          </div>
        </transition>
      </div>

      <div class="clear"></div>
    </div>
  </div>
</body>
<script type="text/javascript">
  var app = new Vue({
    el: "#transition-box",
    data: {
      productList1: [{ Title: "productList1" }, { Title: "productList1" }],
      isProduct1: true,
      isProduct2: false,
      isProduct3: false,
      isProduct4: false,
      sort1: "",
      sort2: "",
      sort3: "",
      sort4: "",
      productList2: [{ Title: "productList2" }, { Title: "productList2" }],
      productList3: [{ Title: "productList3" }, { Title: "productList3" }],
      productList4: [{ Title: "productList4" }, { Title: "productList4" }],
      move: "right"
    },
    methods: {
      goProduct1() {
        this.move = "right";
        this.sort1 = "";
        this.sort2 = "";
        this.isProduct1 = true;
        this.isProduct2 = false;
        this.isProduct3 = false;
        this.isProduct4 = false;
      },
      async goProduct2(item = "") {
        if (item == "button") {
          this.move = "right";
        } else {
          this.move = "left";
        }
        this.sort1 = "111";
        this.sort2 = "222";
        this.sort3 = "";
        this.isProduct1 = false;
        this.isProduct2 = true;
        this.isProduct3 = false;
        this.isProduct4 = false;
      },
      async goProduct3(item = "") {
        if (item == "button") {
          this.move = "right";
        } else {
          this.move = "left";
        }
        this.sort3 = "333";
        this.sort4 = "";
        this.isProduct1 = false;
        this.isProduct2 = false;
        this.isProduct3 = true;
        this.isProduct4 = false;
      },
      async goProduct4(item) {
        this.move = "left";
        this.sort4 = "444";
        this.isProduct1 = false;
        this.isProduct2 = false;
        this.isProduct3 = false;
        this.isProduct4 = true;
      }
    }
  });
</script>

</html>